<template>
    <view class="out-border">
        <!--课程细节提示-->
        <view>
            <uni-pop :show="showClassDetail" :bottomData="currentDayClass" @closeMe="close"></uni-pop>
        </view>
        <view>
            <uni-tab-bar :tabBars="tabBars" :forTest="true" @displayModeChange="showWeek=!showWeek"/>
        </view>
        <view v-if="!showWeek&&showCalendar">
            <view>
                <uni-calendar :selected="selected" :showMonth="true" @change="change" />
            </view>
        </view>
        <view v-if="showWeek&&showCalendar">
            <view>
                <uni-week-calendar :selected="selected" @change="change" />
            </view>
        </view>
    </view>
</template>

<script>
import uniWeekCalendar from '@/components/third_party/uni-calendar/uni-week-calendar.vue';
import uniTabBar from '@/components/third_party/uni-tabbar/uni-tabbar.vue';
import uniPop from '@/components/third_party/uni-pop/uni-pop.vue';
import uniCalendar from '@/components/third_party/uni-calendar/uni-calendar.vue';
import {getDate} from './course';

export default {
    components: {
        uniWeekCalendar,
        uniTabBar,
        uniPop,
        uniCalendar
    },
    props: {
        selected: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data() {
        return {
            showCalendar: false,
            showClassDetail: false,
            currentDayClass: [],
            info: {
                lunar: true,
                range: true,
                insert: false
            },
            showWeek: false,
            tabBars: [{
                name: '月',
                id: 'yue'
            }, {
                name: '周',
                id: 'zhou'
            }]
        };
    },
    onReady() {
        this.$nextTick(() => {
            this.showCalendar = true;
        });
        this.info.date = getDate(new Date(), -30).fullDate;
        this.info.startDate = getDate(new Date(), -60).fullDate;
        this.info.endDate = getDate(new Date(), 30).fullDate;
    },
    methods: {
        change(e) {
            //console.log('change 返回:', e);
            let isWorkDay = this.selected.filter(function(x) {
                return x.course_date == e.fulldate;
            });

            if(isWorkDay != undefined && 0 < isWorkDay.length)
            {
                this.currentDayClass = isWorkDay;
                this.currentDayClass.sort(function(a, b) { return a.start_time.localeCompare(b.start_time); });
                this.showClassDetail = true;
            }
            else
            {
                uni.showToast({
                    title: '这天没有课哟~',
                    icon: 'none'
                });
            }
        },
        close(e)
        {
            if(e.show == false)
                this.showClassDetail = false;
        }
    }
};
</script>

<style lang="scss" scoped>
    /* #ifndef APP-NVUE */
    page {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #efeff4;
        min-height: 100%;
        height: auto;
    }

    view {
        font-size: 14px;
        line-height: inherit;
    }
    /* #endif */

    .out-border{
        border-top-color: #80c340;
        border-top-width: thick;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
    }
</style>
